<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 

<style>
</style>

<div width="950px" style="text-align:left;">
<p>經營管理績效日報表-客戶抱怨案件提報</p>
<p>客戶抱怨案件搜尋</p>

	<form id="f1" action="<c:url value="/report07/find.do"/>" method="get">
		搜尋欄位:
		<c:set var="searcyByStartDate" value=""></c:set>
		<c:set var="searcyByfdDate" value=""></c:set>
		<c:choose>
			<c:when test="${searchType =='startDate'}">
				<c:set var="searcyByStartDate" value="selected='selected'"></c:set>
			</c:when>
			<c:when test="${searchType =='fdDate'}">
				<c:set var="searcyByfdDate" value="selected='selected'"></c:set>
			</c:when>
		</c:choose>
		<select name="searchType">
			<option value="startDate" ${searcyByStartDate }>開單日期</option>
			<option value="fdDate" ${searcyByfdDate } >判定完成日期</option>
		</select>
		搜尋日期:
		<input type="text" id="searchDate" name="searchDate" readonly='true' value="${searchDate }"> ~
		<input type="text" id="endSearchDate" name="endSearchDate" readonly='true' value="${endSearchDate }">
			<br>
		<input type="submit" id="doSearch" value="搜尋"  >		
	</form>

</div>
<script>

$(function() {

	$.datepicker.regional['zh-TW'] = {
			clearText: '清除', clearStatus: '清除已選日期',
			closeText: '關閉', closeStatus: '取消選擇',
			prevText: '<上一月', prevStatus: '顯示上個月',
			nextText: '下一月>', nextStatus: '顯示下個月',
			currentText: '今天', currentStatus: '顯示本月',
			monthNames: ['一月','二月','三月','四月','五月','六月',
			'七月','八月','九月','十月','十一月','十二月'],
			monthNamesShort: ['一','二','三','四','五','六',
			'七','八','九','十','十一','十二'],
			monthStatus: '選擇月份', yearStatus: '選擇年份',
			weekHeader: '周', weekStatus: '',
			dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
			dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
			dayNamesMin: ['日','一','二','三','四','五','六'],
			dayStatus: '設定每周第一天', dateStatus: '選擇 m月 d日, DD',
			dateFormat: 'yy-mm-dd', firstDay: 1, 
			initStatus: '請選擇日期', isRTL: false
		};
	
	// formate date picker	
	$('#searchDate').datepicker({
			dateFormat:"yy-mm-dd",
			changeMonth: true,
			changeYear: true,
			onSelect: function( selectedDate ) {
                $( "#endSearchDate" ).datepicker( "option", "minDate", selectedDate );
            }
		});

	$("#searchDate").keypress(function(event) {event.preventDefault();});

	$('#endSearchDate').datepicker({
		dateFormat:"yy-mm-dd",
		changeMonth: true,
		changeYear: true,
		onSelect: function( selectedDate ) {
            $( "#searchDate" ).datepicker( "option", "maxDate", selectedDate );
        }
	});

	$("#endSearchDate").keypress(function(event) {event.preventDefault();});

	var toDate = new Date();
	var month = toDate.getMonth()+1;
	if(month<10){
		month = "0"+month;
	}
	var date = toDate.getDate();
	if(date<10){
		date = "0"+date;
	}
	
	var prettyDate = toDate.getFullYear()+ '-' +month+'-'+ date;

    if($('#searchDate').val() == ''){
    	$('#searchDate').val(prettyDate);
    	$('#endSearchDate').val(prettyDate);    
    }    
	
});

</script>

